@charset "utf-8";

.xyclearfix:after { visibility:hidden; display:block; font-size:0; content:"."; clear:both; height:0; overflow:hidden;}
.xyid-icon{ overflow:hidden; display:block; background-image:url(/themes/meilele/images/xyind-icons.png); background-repeat:no-repeat;}

.xyind-4tlbox{ width:100%; min-width:1200px; overflow:hidden;}
.xyind-4tool{ width:1200px; margin:30px auto;}
.xyind-4tool ul li{ float:left; width:284px; border-top:3px solid #fe7515; margin:0 8px; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s;}
.xyind-4tool ul li:hover{ box-shadow:0 10px 25px rgba(0,0,0,0.1); -webkit-box-shadow:0 10px 25px rgba(0,0,0,0.1); -moz-box-shadow:0 10px 25px rgba(0,0,0,0.1); -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0);}
.xyind-4tool ul li .xydis{height:330px; overflow:hidden; position:relative; border:2px solid #ffefe7; border-top:1px solid #ffefe7;}
.xyind-4tool ul li h2{ text-align:center; font-size:18px; color:#ff6600; padding-top:20px;}
.xyind-4tool ul li p{ text-align:center; color:#8e8e8e;}
.xyind-4tool ul li span{ color:#fe002a; font-weight:bold; margin:0 5px;}
.xyabtt{ width:150px; height:37px; position:relative; margin:0 auto; background:#ff6600;}
.xyabtt a{ position:relative; z-index:2; display:block; width:100%; font-size:16px; line-height:37px; text-align:center; color:#fff;}
.xyabtt:after{content:""; position:absolute; width:0; transition:0.3s; height:100%; top:0; left:0; background:#fb7b17;}
.xyabtt:hover:after{width:100%;}

.xydis-bg1{ background:url(/themes/meilele/images/xy-home1.jpg) bottom right no-repeat;}
.xydis-bg2{ background:url(/themes/meilele/images/xy-home2.jpg) bottom right no-repeat;}
.xydis-bg3{ background:url(/themes/meilele/images/xy-home3.jpg) bottom right no-repeat;}
.xydis-bg4{ background:url(/themes/meilele/images/xy-home4.jpg) bottom right no-repeat;}

.xydis-img{ height:154px; position:relative;}
.xydis-img i.sbcx{ position:absolute; left:50%; top:46px; width:92px; height:105px; margin-left:-46px; background-position:-42px -17px;}
.xydis-img i.sbqm{ position:absolute; left:50%; top:46px; width:92px; height:105px; margin-left:-46px; background-position:-182px -17px;}
.xydis-img i.sbjk{ position:absolute; left:50%; top:46px; width:104px; height:105px; margin-left:-52px; background-position:-317px -19px;}
.xydis-img i.zljs{ position:absolute; left:50%; top:46px; width:92px; height:105px; margin-left:-46px; background-position:-463px -17px;}

.xydis-img i.sbcx,.xydis-img i.sbqm,.xydis-img i.sbjk,.xydis-img i.zljs{transition:all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.xyind-4tool ul li:hover i.sbcx,.xyind-4tool ul li:hover i.sbqm,.xyind-4tool ul li:hover i.sbjk,.xyind-4tool ul li:hover i.zljs{ transform: scale(1.15, 1.15);}

.xydis-img i.dd1{ position:absolute; width:14px; height:14px; background-position:-49px -167px; transition: all .3s ease-out 0s;}
.xydis-img i.dd2{ position:absolute; width:13px; height:13px; background-position:-79px -167px; transition: all .3s ease-out 0s;}
.xydis-img i.dd3{ position:absolute; width:13px; height:13px; background-position:-109px -167px; transition: all .3s ease-out 0s;}
.xyposi-1{ left:70px; top:65px;}
.xyposi-2{ right:100px; top:34px;}
.xyposi-3{ right:80px; top:110px;}
.xyposi-4{ left:120px; top:28px;}
.xyposi-5{ right:74px; top:120px;}
.xyposi-6{ left:65px; top:65px;}

.xyind-4tool ul li:hover .xydis-img i.dd1{ left:65px;}
.xyind-4tool ul li:hover .xydis-img i.dd2{ top:24px;}
.xyind-4tool ul li:hover .xydis-img i.dd3{ right:70px;}

@-webkit-keyframes dd1 {0% {-webkit-transform: translateX(-3px); transform: translateX(-3px);}50% {-webkit-transform: translateX(3px);transform: translateX(3px);}100% {-webkit-transform: translateX(-3px); transform: translateX(-3px);}}
@keyframes dd1 {0% {-webkit-transform: translateX(-3px);transform: translateX(-3px);}50% {-webkit-transform: translateX(3px); transform: translateX(3px);}100% {-webkit-transform: translateX(-3px);transform: translateX(-3px);}}
@-webkit-keyframes dd1-float {100% {-webkit-transform: translateX(-3px);transform: translateX(-3px);}}
@keyframes dd1-float {100% {-webkit-transform: translateX(-3px);transform: translateX(-3px);}}
.dd1 {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;}
.xyind-4tool ul li:hover .xydis-img>.dd1,.xyind-4tool ul li:focus .xydis-img>.dd1,.xyind-4tool ul li:active .xydis-img>.dd1 { -webkit-animation-name: dd1-float, dd1; animation-name: dd1-float, dd1; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}

@-webkit-keyframes dd2 {0% {-webkit-transform:translateY(-1px); transform: translateY(-1px);}50% {-webkit-transform: translateY(1px);transform: translateY(1px);}100% {-webkit-transform: translateY(-1px); transform: translateY(-1px);}}
@keyframes dd2 {0% {-webkit-transform: translateY(-1px);transform: translateY(-1px);}50% {-webkit-transform: translateY(1px); transform: translateY(1px);}100% {-webkit-transform: translateY(-1px);transform: translateY(-1px);}}
@-webkit-keyframes dd2-float {100% {-webkit-transform: translateY(-1px);transform: translateY(-1px);}}
@keyframes dd2-float {100% {-webkit-transform: translateY(-1px);transform: translateY(-1px);}}
.dd2 {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;}
.xyind-4tool ul li:hover .xydis-img>.dd2,.xyind-4tool ul li:focus .xydis-img>.dd2,.xyind-4tool ul li:active .xydis-img>.dd2 { -webkit-animation-name: dd2-float, dd2; animation-name: dd2-float, dd2; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}

@-webkit-keyframes dd3 {0% {-webkit-transform:translateY(-2px); transform: translateY(-2px);}50% {-webkit-transform: translateY(2px);transform: translateY(2px);}100% {-webkit-transform: translateY(-2px); transform: translateY(-2px);}}
@keyframes dd3 {0% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}50% {-webkit-transform: translateY(2px); transform: translateY(2px);}100% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}}
@-webkit-keyframes dd3-float {100% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}}
@keyframes dd3-float {100% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}}
.dd3 {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;}
.xyind-4tool ul li:hover .xydis-img>.dd3,.xyind-4tool ul li:focus .xydis-img>.dd3,.xyind-4tool ul li:active .xydis-img>.dd3 { -webkit-animation-name: dd3-float, dd3; animation-name: dd3-float, dd3; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}

.xydis-new{ width:78px; height:78px; position:absolute; right:0; top:0; background-position:-722px 0;}
.xydis-hot{ width:78px; height:78px; position:absolute; right:0; top:0; background-position:-722px -90px;}

.xy-fz12{ font-size:12px;}
.xy-fz14{ font-size:14px;}
.xy-pt20{ padding-top:17px;}
.xy-pt13{ padding-top:13px;}
.xy-pt5{ padding-top:5px; padding-bottom:17px;}